<template>
	<div>
		<div class="search">
			角色名称：
			<el-input clearable v-model="page.roleName" size="small" placeholder="请输入角色名称"></el-input>

			<el-button icon="el-icon-search" @click="search" style="margin-left: 20px" size="small" type="primary">查询</el-button>

			<el-button icon="el-icon-plus" @click="showAdd" style="margin-left: 30px" size="small" type="success">新增角色</el-button>
		</div>

		<div style="padding-top: 30px">
			<el-table
					:data="roleList"
					border
					style="width: 100%">
				<el-table-column
						fixed
						label="角色名称"
						show-overflow-tooltip
						align="center">
					<template slot-scope="scope">
						<el-tag>{{scope.row.roleName}}</el-tag>
					</template>
				</el-table-column>
				<el-table-column
						prop="roleCode"
						label="角色字符"
						align="center">
				</el-table-column>
				<el-table-column
						label="状态"
						show-overflow-tooltip
						align="center">
					<template slot-scope="scope">
						<el-switch
								@change="changeStatus(scope.row.id)"
								:active-value="Number(1)"
								:inactive-value="Number(0)"
								v-model="scope.row.roleStatus">
						</el-switch>
					</template>
				</el-table-column>

				<el-table-column
						prop="createTime"
						label="创建时间"
						show-overflow-tooltip
						align="center">
				</el-table-column>

				<el-table-column
						prop="updateTime"
						label="修改时间"
						show-overflow-tooltip
						align="center">
				</el-table-column>

				<el-table-column
						label="备注"
						prop="noteDes"
						show-overflow-tooltip
						align="center">
				</el-table-column>

				<el-table-column
						fixed="right"
						label="操作"
						width="300"
						align="center">
					<template slot-scope="scope" v-if="scope.row.id!==1">
						<el-button icon="el-icon-edit" @click="showEdit(scope.row)" type="text" size="small">修改
						</el-button>
						<el-button type="text" icon="el-icon-delete" size="small" @click="deleteById(scope.row.id)">删除
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<!--分页-->
		<div style="padding-top: 50px;text-align: center">
			<el-pagination
					class="pagiantion"
					:total="total"
					@current-change="handleSelectionChange"
					:current-page="page.pageIndex"
					:page-size="page.pageSize"
					layout="total, prev, pager, next, jumper"
			>
			</el-pagination>
		</div>

		<el-dialog
				title="新增角色"
				:visible.sync="centerDialogVisible"
				width="45%"
				:before-close="beforeClose"
				center>
			<div>
				<el-form :rules="rules" ref="ruleForm" :model="addRole" label-width="150px">
					<el-form-item label="角色名称：" prop="roleName">
						<el-input maxlength="12" v-model="addRole.roleName" placeholder="请输入角色名称"
								  size="small"></el-input>
					</el-form-item>

					<el-form-item label="角色字符：" prop="roleCode">
						<el-input maxlength="12" v-model="addRole.roleCode" placeholder="请输入角色字符"
								  size="small"></el-input>
					</el-form-item>

					<el-form-item label="角色状态：" prop="roleStatus">
						<el-radio v-model="addRole.roleStatus" label="1">正常</el-radio>
						<el-radio v-model="addRole.roleStatus" label="0">停用</el-radio>
					</el-form-item>

					<el-form-item label="角色权限：">
						<el-tree
								ref="tree"
								@check="currentCheck"
								:data="treeList"
								show-checkbox
								node-key="id"
								highlight-current
								:props="defaultProps">
						</el-tree>
					</el-form-item>

					<el-form-item label="角色备注：" prop="noteDes">
						<el-input type="textarea"
								  :rows="2" style="width: 300px" maxlength="30" v-model="addRole.noteDes"
								  placeholder="请输入角色备注"
								  size="small"></el-input>
					</el-form-item>

				</el-form>

			</div>
			<span slot="footer" class="dialog-footer">
    <el-button @click="beforeClose">取 消</el-button>
    <el-button type="primary" @click="submitAdd('ruleForm')">确 定</el-button>
  </span>
		</el-dialog>

		<el-dialog
				title="修改角色"
				:visible.sync="centerDialogVisible2"
				width="45%"
				:before-close="beforeClose2"
				center>
			<div>
				<el-form :rules="rules" ref="ruleForm" :model="editRole" label-width="150px">
					<el-form-item label="角色名称：" prop="roleName">
						<el-input maxlength="12" v-model="editRole.roleName" placeholder="请输入角色名称"
								  size="small"></el-input>
					</el-form-item>

					<el-form-item label="角色字符：" prop="roleCode">
						<el-input maxlength="12" v-model="editRole.roleCode" placeholder="请输入角色字符"
								  size="small"></el-input>
					</el-form-item>

					<el-form-item label="角色状态：" prop="roleStatus">
						<el-radio v-model="editRole.roleStatus" :label="Number(1)">正常</el-radio>
						<el-radio v-model="editRole.roleStatus" :label="Number(0)">停用</el-radio>
					</el-form-item>

					<el-form-item label="角色权限：">
						<el-tree
								ref="tree2"
								@check="currentCheck2"
								:data="treeList"
								show-checkbox
								highlight-current
								node-key="id"
								:props="defaultProps">
						</el-tree>
					</el-form-item>

					<el-form-item label="角色备注：" prop="noteDes">
						<el-input type="textarea"
								  :rows="2" style="width: 300px" maxlength="30" v-model="editRole.noteDes"
								  placeholder="请输入角色备注"
								  size="small"></el-input>
					</el-form-item>

				</el-form>

			</div>
			<span slot="footer" class="dialog-footer">
    <el-button @click="beforeClose2">取 消</el-button>
    <el-button type="primary" @click="submitEdit('ruleForm')">确 定</el-button>
  </span>
		</el-dialog>

	</div>
</template>

<script>
	export default {
		name: "role",
		data() {
			return {
				centerDialogVisible: false,
				centerDialogVisible2: false,
				roleList: [],
				total: 0,
				page: {
					pageIndex: 1,
					pageSize: 8,
					roleName: null
				},
				addRole: {},
				editRole: {},
				rules: {
					roleName: [
						{required: true, message: '请输入角色名称', trigger: 'blur'},
						{min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur'}
					],
					roleCode: [
						{required: true, message: '请输入角色字符', trigger: 'blur'},
						{min: 3, max: 7, message: '长度在 3 到 7 个字符', trigger: 'blur'}
					],
					roleStatus: [
						{required: true, message: '请选择角色状态', trigger: 'blur'},
					],
					noteDes: [
						{required: true, message: '请选择角色备注', trigger: 'blur'},
					],
				},
				defaultProps: {
					children: 'children',
					label: 'label'
				},
				treeList: []
			}
		},
		methods: {
			search() {
				this.page.pageIndex = 1;
				this.findPage();
			},
			deleteById(roleId) {
				this.$confirm('确定删除此角色吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.get('/role/deleteById?roleId=' + roleId).then(res => {
						if (res.data.code === 200) {
							this.findPage();
							this.$message.success(res.data.message);
						}
					})
				})
			},
			showEdit(obj) {
				this.editRole = obj;
				this.centerDialogVisible2 = true;
				this.$nextTick(() => {
					this.$refs.tree2.setCheckedKeys(obj.permissionId)
				})
			},
			currentCheck(nodeObj, selectObj) {
				// console.log('选中的节点key数组：'+selectObj.checkedKeys)
				this.addRole.permissionId = selectObj.checkedKeys;
			},
			currentCheck2(nodeObj, selectObj) {
				this.editRole.permissionId = selectObj.checkedKeys;
			},
			findTreeList() {
				this.axios.get('/role/findTreeList').then(res => {
					if (res.data.code === 200) {
						this.treeList = res.data.data;
					}
				})
			},
			beforeClose() {
				this.$refs.ruleForm.clearValidate();
				this.centerDialogVisible = false;
			},
			beforeClose2() {
				this.$refs.ruleForm.clearValidate();
				this.centerDialogVisible2 = false;
				this.findPage();
			},
			submitEdit(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//获取父节点
						let hafCheckedKeys = this.$refs.tree2.getHalfCheckedKeys();
						//去重
						this.editRole.permissionId = Array.from(new Set(this.editRole.permissionId.concat(hafCheckedKeys)))
						this.axios.post('/role/edit', this.editRole).then(res => {
							if (res.data.code === 200) {
								this.findPage();
								this.centerDialogVisible2 = false;
								this.editRole = {};
								this.$message.success(res.data.message);
							}
						})
					} else {
						this.$message.warning('请输入必填内容');
						return false;
					}
				});
			},
			submitAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if (valid) {
						//获取父节点
						let hafCheckedKeys = this.$refs.tree.getHalfCheckedKeys();
						//去重
						this.addRole.permissionId = Array.from(new Set(this.addRole.permissionId.concat(hafCheckedKeys)))
						this.axios.post('/role/add', this.addRole).then(res => {
							if (res.data.code === 200) {
								this.findPage();
								this.centerDialogVisible = false;
								this.addRole = {};
								this.$message.success(res.data.message);
							}
						})
					} else {
						this.$message.warning('请输入必填内容');
						return false;
					}
				});
			},
			showAdd() {
				this.addRole = {};
				this.centerDialogVisible = true;
				this.$nextTick(() => {
					this.$refs.tree.setCheckedKeys([])
				})
			},
			changeStatus(roleId) {
				this.$confirm('确定要执行此操作吗, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.axios.get('/role/changeStatus?roleId=' + roleId).then(res => {
						if (res.data.code === 200) {
							this.findPage();
							this.$message.success(res.data.message);
						}
					})
				}).catch(() => {
					this.findPage();
				});
			},
			findPage() {
				this.axios.post('/role/findPage', this.page).then(res => {
					if (res.data.code === 200) {
						this.roleList = res.data.data.data;
						this.total = res.data.data.total;
					}
				})
			},
			handleSelectionChange(currentPage) {
				this.page.pageIndex = currentPage;
				this.findPage();
			},
		},
		created() {
			this.findPage();
			this.findTreeList();
		}
	}
</script>

<style scoped>

	.el-input {
		width: 300px;
	}

	.el-select {
		width: 300px;
	}
</style>